<template>
  <div style="width:100%">
    <div
      class="item_content"
      @click="() => handleItemClick(item)"
      v-for="(item, i) in dataSource"
      :key="'key-' + i * 3"
      :style="`border-bottom: ${split ? '1px solid #eee' : 'none'}`"
    >
      <div class="left_box">
        <div class="status-icon">
          <slot name="icon" v-bind="item" />
        </div>
      </div>
      <div class="message">
        <div class="title">{{ item.title }}</div>
        <div class="bottom">
          <slot name="description" v-bind="item">
            {{ item.description }}
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @method handleItemClick (e:any)=>void
 * @interface  props
 *      dataSource:array<{
 *         title:String,
 *         description
 *     }>
 */
export default {
  name: 'DList',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    split: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleItemClick(item) {
      this.$emit('handleItemClick', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.item_content {
  width: 100%;
  height: 75px;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  transition: all 0.1s ease-in-out;
  display: flex;
  cursor: pointer;
  .message {
    flex: 1;
    padding-right: 20px;
    box-sizing: border-box;
    .title {
      font-weight: 400;
      color: #444444;
      line-height: 14px;
      margin-bottom: 10px;
      width: 100%;
    }
    .bottom {
      display: flex;
      line-height: 12px;
      font-weight: 400;
      color: #999999;
      font-size: 12px;
    }
  }
  .left_box {
    width: 25px;
    height: 100%;
    box-sizing: border-box;
    .status-icon {
      position: relative;
      top: -4px;
    }
  }
}
.item_content:hover {
  background-color: #eff4fe;
  border-bottom: 1px solid #ddd;
}
.add_btn {
  font-size: 13px;
  color: #2074e1;
  padding-left: 20px;
  margin-top: 20px;
  cursor: pointer;
}
.add_btn:hover {
  color: #2166c0;
}
</style>
